<template>
  <!-- 在线简历的展示 -->
  <div v-show="isModResume">
    <div class="on-line-shell-header">
      <!-- 个人信息部分 -->
      <div class="resume-userInfo">
        <div class="resume-userImg">
          <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            <SvgIcon icon-name="camera" class="resume-userImg-svg"></SvgIcon>
          </el-upload>
        </div>
        <div class="resume-userInfo-text">
          <div class="resume-userName">张三</div>
          <div class="resume-userInfo-description">
            <div class="alignment">
              <SvgIcon icon-name="education" class="mr"></SvgIcon>本科
            </div>
            <div class="alignment">
              <SvgIcon icon-name="telephone" class="mr"></SvgIcon>15811611365
            </div>
          </div>
          <div class="resume-userInfo-description">
            <div class="alignment">
              <SvgIcon icon-name="employmentStatus" class="mr"></SvgIcon
              >应届毕业生
            </div>
            <div class="alignment">
              <SvgIcon icon-name="email" class="mr"></SvgIcon>1504794899@qq.com
            </div>
          </div>
        </div>
      </div>
      <!-- 个人信息部分结束 -->
      <!-- 个人优势部分 -->
      <div class="personalAdvantages">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div style="display: flex; align-items: center">
            <div
              style="
                width: 4px;
                height: 30px;
                margin-right: 10px;
                background-color: #fff;
                border-radius: 10px;
                display: inline-block;
              "
            ></div>
            <div class="personalAdvantages-title">个人优势</div>
          </div>
          <div>
            <el-button
              style="padding: 10px"
              type="success"
              plain
              @click="modResume"
              v-show="isModResume"
              >导出pdf文件</el-button
            >
            <el-button
              style="padding: 10px"
              type="primary"
              plain
              @click="modResume"
              v-show="isModResume"
              >编辑资料</el-button
            >
          </div>
        </div>
        <div style="margin-left: 10px; margin-top: 10px">
          测试测试测试测试测试测试测试测试测试测试
          测试测试测试测试测试测试测试测试测试测试
        </div>
      </div>
    </div>
    <div class="on-line-shell-center">
      <!-- 期望岗位 -->
      <div class="expectedPosition">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">期望岗位</div>
        </div>
        <div class="expectedPosition-content">
          <span class="pr-10 border-r">前端/移动开发</span>
          <span class="pr-10 pl-10 border-r">3-5k</span>
          <span class="pl-10">广州、河源、深圳</span>
        </div>
      </div>
      <!-- 教育经历 -->
      <div class="educationalExperience">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">教育经历</div>
        </div>
        <div class="educationalExperience-content">
          <span class="pr-10 border-r">广东白云学院</span>
          <span class="pr-10 pl-10 border-r">2022 &nbsp;-&nbsp; 2026</span>
          <span class="pr-10 pl-10 border-r">软件工程</span>
          <span class="pl-10">本科</span>
        </div>
        <div class="majorCourses">
          <span>主修课程：</span>
          <span>计算机网络、c++、软件工程</span>
        </div>
      </div>
    </div>
    <div class="on-line-shell-center">
      <!-- 社团/组织经历 -->
      <div class="expectedPosition">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">社团/组织经历</div>
        </div>
        <div class="expectedPosition-content">
          <div class="info-text">
            领导与管理：
            1.领导并管理软件协会的日常运营，包括活动策划、会员招募、团队协调等。
            2.组织并主持会议，制定学期计划和战略目标，确保协会的持续发展和会员满意度。
            项目管理： 1.维护多项软件项目，不断更新需求，带领会员参加不同比赛。
            2,组织编程小课堂、算法以及项目的讲解，促进成员之间的交流与学习
            推动创新：
            提倡技术创新和实践，鼓励会员参与开源项目、科研探索和新技术应用。
            推动协会与行业前沿保持同步，帮助会员不断提升专业能力。
          </div>
        </div>
      </div>
      <!-- 专业技能 -->
      <div class="educationalExperience">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">专业技能</div>
        </div>
        <div class="educationalExperience-content">
          <ul>
            <li>
              <div
                class="info-text"
                v-html="
                  '1.熟练掌握HTML、CSS、JavaScript等前端技术，具备良好的代码编写习惯和规范\n2.熟悉Vue.js框架，能够独立完成前端页面的开发与维护\n3.具备良好的沟通能力和团队协作精神，能够与团队成员紧密合作，共同完成项目任务。'
                "
              ></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="on-line-shell-center">
      <!-- 工作/实习经历 -->
      <div class="expectedPosition">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">工作/实习经历</div>
        </div>
        <div style="margin-top: 10px; overflow: hidden">
          <div class="project-header">
            <div class="project-title">软件协会官网</div>
            <div class="project-role">前端开发</div>
          </div>
          <ul>
            <li>
              <span>内容：</span>
              <span
                class="info-text"
                v-html="
                  '1.熟练掌握HTML、CSS、JavaScript等前端技术，具备良好的代码编写习惯和规范\n2.熟悉Vue.js框架，能够独立完成前端页面的开发与维护\n3.具备良好的沟通能力和团队协作精神，能够与团队成员紧密合作，共同完成项目任务。'
                "
              ></span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 项目经历 -->
      <div class="educationalExperience">
        <div style="display: flex; align-items: center">
          <div
            style="
              width: 4px;
              height: 30px;
              margin-right: 10px;
              background-color: #fff;
              border-radius: 10px;
            "
          ></div>
          <div class="personalAdvantages-title">项目经历</div>
        </div>
        <div class="educationalExperience-content">
          <div class="project-header">
            <div class="project-title">软件协会官网</div>
            <div class="project-role">前端开发</div>
          </div>
          <ul>
            <li>
              <span>内容：</span>
              <span
                class="info-text"
                v-html="
                  '1.熟练掌握HTML、CSS、JavaScript等前端技术，具备良好的代码编写习惯和规范\n2.熟悉Vue.js框架，能够独立完成前端页面的开发与维护\n3.具备良好的沟通能力和团队协作精神，能够与团队成员紧密合作，共同完成项目任务。'
                "
              ></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 在线简历修改 -->
  <div v-show="!isModResume" style="color: #fff">
    <div style="display: flex">
      <!-- 编辑个人信息 -->
      <div>
        <div class="modUserInfo">编辑个人信息</div>
        <div class="modUserInfo-content">
          <div>
            姓名
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
          <div>
            在读状态
            <el-select
              v-model="value"
              clearable
              placeholder="请选择您的在读状态"
              style="width: 240px"
              size="large"
            >
              <el-option label="应届毕业生" value="应届毕业生" />
              <el-option label="在校生" value="在校生" />
              <el-option label="毕业生" value="毕业生" />
            </el-select>
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            性别
            <el-radio-group v-model="radio1" size="large">
              <el-radio-button label="男" value="New York" />
              <el-radio-button
                label="女"
                value="Washington"
                style="margin-left: 10px"
              />
            </el-radio-group>
          </div>
          <div>
            学历
            <el-select
              v-model="value"
              clearable
              placeholder="请选择您的学历"
              style="width: 240px"
              size="large"
            >
              <el-option label="研究生" value="应届毕业生" />
              <el-option label="本科" value="在校生" />
              <el-option label="专业" value="毕业生" />
            </el-select>
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            电话
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的电话"
              size="large"
              clearable
            />
          </div>
          <div>
            邮箱
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的邮箱"
              size="large"
              clearable
            />
          </div>
        </div>
      </div>

      <!-- 编辑个人优势 -->
      <div>
        <div
          style="display: flex; width: 580px; justify-content: space-between"
        >
          <div class="modUserInfo">编辑个人优势</div>
          <div>
            <el-button style="padding: 10px" @click="exitEditing"
              >退出</el-button
            >
            <el-button style="padding: 10px" type="primary" @click="saveResume"
              >保存</el-button
            >
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            个人优势
            <el-input
              v-model="name"
              style="width: 580px"
              :rows="9"
              type="textarea"
              placeholder="请输入您的个人简介"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex">
      <!-- 编辑求职期望 -->
      <div>
        <div class="modUserInfo">编辑求职期望</div>
        <div class="modUserInfo-content">
          <div>
            期望地区
            <el-select
              v-model="value"
              clearable
              placeholder="请选择您的在读状态"
              style="width: 240px"
              size="large"
            >
              <el-option label="应届毕业生" value="应届毕业生" />
              <el-option label="在校生" value="在校生" />
              <el-option label="毕业生" value="毕业生" />
            </el-select>
          </div>
          <div>
            期望岗位
            <el-select
              v-model="value"
              clearable
              placeholder="请选择您的在读状态"
              style="width: 240px"
              size="large"
            >
              <el-option label="应届毕业生" value="应届毕业生" />
              <el-option label="在校生" value="在校生" />
              <el-option label="毕业生" value="毕业生" />
            </el-select>
          </div>
          <div>
            期望薪资
            <div
              style="
                height: 50px;
                display: flex;
                align-items: center;
                padding: 0;
              "
            >
              <div>
                <el-select
                  v-model="name"
                  clearable
                  placeholder="最低薪资"
                  style="width: 140px"
                  size="large"
                >
                  <el-option label="应届毕业生" value="应届毕业生" />
                  <el-option label="在校生" value="在校生" />
                  <el-option label="毕业生" value="毕业生" />
                </el-select>
              </div>
              <div>至</div>
              <div>
                <el-select
                  v-model="name"
                  clearable
                  placeholder="最高薪资"
                  style="width: 140px"
                  size="large"
                >
                  <el-option label="应届毕业生" value="应届毕业生" />
                  <el-option label="在校生" value="在校生" />
                  <el-option label="毕业生" value="毕业生" />
                </el-select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex">
      <!-- 编辑教育经历 -->
      <div>
        <div class="modUserInfo">编辑教育经历</div>
        <div class="modUserInfo-content">
          <div>
            学校名称
            <el-autocomplete
              v-model="name"
              :fetch-suggestions="querySearch"
              clearable
              class="inline-input w-50"
              placeholder="请选择您的院校"
              size="large"
              style="margin: 5px"
            />
          </div>
          <div>
            专业
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="Please input"
              clearable
              size="large"
            />
          </div>
          <div>
            学历
            <el-select
              v-model="value"
              clearable
              placeholder="请选择您的学历"
              style="width: 240px"
              size="large"
            >
              <el-option label="应届毕业生" value="应届毕业生" />
              <el-option label="在校生" value="在校生" />
              <el-option label="毕业生" value="毕业生" />
            </el-select>
          </div>
          <div>
            主修课程
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="Please input"
              clearable
              size="large"
            />
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            在校时间
            <el-date-picker
              v-model="name"
              type="daterange"
              range-separator="To"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
              style="margin: 5px"
            />
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex">
      <!-- 添加工作/实习经历 -->
      <div>
        <div class="modUserInfo">编辑工作/实习经历</div>
        <div class="modUserInfo-content">
          <div>
            公司名称
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
          <div>
            职位名称
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            所属部门
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
          <div>
            在职时间
            <el-date-picker
              v-model="name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="large"
            />
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            工作内容
            <el-input
              v-model="name"
              style="width: 480px"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入您在工作时候的内容"
            />
          </div>
        </div>
      </div>

      <!-- 编辑个人优势 -->
      <div>
        <div class="modUserInfo">编辑项目经历</div>
        <div class="modUserInfo-content">
          <div>
            项目名称
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
          <div>
            项目角色
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            项目链接
            <el-input
              v-model="name"
              style="width: 240px"
              placeholder="请输入您的姓名"
              size="large"
              clearable
            />
          </div>
          <div>
            在职时间
            <el-date-picker
              v-model="name"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              size="large"
              style="margin: 5px"
            />
          </div>
        </div>
        <div class="modUserInfo-content">
          <div>
            项目描述
            <el-input
              v-model="name"
              style="width: 480px"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入您在工作时候的内容"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, type FormInstance, type FormRules, type UploadProps } from "element-plus";
import { reactive, ref } from "vue";
import { getOnlineResume } from "@/api/onlineResume";


//测试数据
const name = ref("");
const value = ref("");
const radio1 = ref("");

const imageUrl = ref("");


// 头像部分
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};


//控制在线简历的编辑与展示
const isModResume = ref(true);
//改变在线简历的编辑与展示
const modResume = () => {
  isModResume.value = false;
};
//退出编辑
const exitEditing = () => {
  isModResume.value = true;
};
//保存在线简历
const saveResume = () => {
  isModResume.value = true;
};
//在线简历部分
interface RuleForm {
  name: string;
  region: string;
  stations: string;
  skill: string;
  work: string;
  desc: string;
  salary: string;
  phonenum: string;
  honor: string;
  project: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  region: "",
  stations: "",
  skill: "",
  work: "",
  desc: "",
  salary: "",
  phonenum: "",
  honor: "",
  project: "",
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss" scoped>
// 在线简历部分
.on-line-shell-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;

  .resume-userInfo {
    display: flex;
    align-items: center;
    width: 395px;

    .avatar-uploader {
      width: 100%;
      height: 100%;
    }

    .resume-userImg {
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 50%;
    }
    .resume-userImg:hover {
      background-color: rgb(114, 115, 117);
    }
    .resume-userImg-svg {
      display: none;
    }
    .resume-userImg:hover .resume-userImg-svg {
      display: block;
    }
    .resume-userImg:hover .avatar-uploader-icon {
      display: none;
    }

    //个人信息
    .resume-userInfo-text {
      color: #fff;
      margin-left: 20px;
      margin-top: 10px;

      .resume-userName {
        font-size: 30px;
      }
      .resume-userInfo-description {
        margin-top: 5px;
        font-size: 14px;
        display: flex;

        div {
          margin-left: 10px;
        }
      }
    }
  }

  //个人优势
  .personalAdvantages {
    width: 640px;
    height: 100px;
    margin-left: 50px;
    color: #fff;
  }
}
.on-line-shell-center {
  width: 100%;
  color: #fff;
  margin-top: 20px;
  display: flex;

  .expectedPosition {
    width: 542px;
    .expectedPosition-content {
      margin-top: 10px;
    }
  }

  .educationalExperience {
    width: 542px;
    margin-left: 50px;
    .educationalExperience-content {
      margin-top: 10px;
      overflow: hidden;
    }
  }
}
.project-header {
  display: flex;
  width: 200px;
  justify-content: space-between;
  font-size: 18px;
}
//在线简历编辑部分
.modUserInfo {
  font-size: 20px;
  width: 50%;
}
.modUserInfo-content {
  display: flex;
  width: 100%;
  div {
    width: 243px;
    padding: 5px;
  }
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  padding: 12px 39px;
  border-radius: 5px;
}
:deep(.el-radio-button:last-child .el-radio-button__inner) {
  padding: 12px 39px;
  border-radius: 5px;
}

.on-line-shell-footer {
  width: 100%;
  color: #fff;
  margin-top: 20px;
  display: flex;

  .workExperience {
    width: 395px;
    .workExperience-content {
    }
  }
}
.personalAdvantages-title {
  display: inline-block;
  font-size: 20px;
}
</style>
